<template>
    <el-container>
        <el-container style="height: 520px">
            <el-header>
                <el-form
                    inline
                    label-width="49px"
                    :model="queryList"
                    style="margin-top: 5px; width: 100%"
                >
                    <el-date-picker
                        style="width: 300px"
                        v-model="queryList.purchaseDates"
                        type="datetimerange"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        format="YYYY-MM-DD HH:mm:ss"
                        range-separator="-"
                        unlink-panels="true"
                        start-placeholder="开始借货时间"
                        end-placeholder="结束借货时间"
                        :default-time="defaultTime"
                    />&nbsp;
                    <el-input
                        placeholder="---请输入采购编号---"
                        v-model="queryList.purchaseOrderCode"
                        style="width: 180px"
                        @keyup.enter="$refs.mytable.getData()"
                    />&nbsp;
                    <el-input
                        placeholder="---请输入物料编码---"
                        v-model="queryList.materialCode"
                        style="width: 180px"
                        @keyup.enter="$refs.mytable.getData()"
                    />&nbsp;
                    <el-input
                        placeholder="---请输入物料名称---"
                        v-model="queryList.materialName"
                        style="width: 180px"
                        @keyup.enter="$refs.mytable.getData()"
                    />&nbsp;
                   
                    <el-button type="primary" @click="$refs.mytable.getData()">查询</el-button>
                </el-form>
            </el-header>
            <el-foot>
                <scTable
                    ref="mytable"
                    :tree-props="{ checkStrictly: false,children: 'applyOrderItems'  }"
                    :queryType="queryType"
                    checkStrictly
                    :queryList="queryList"
                    :column="columnList"
                    :sort-orders="['ascending', 'descending']"
                    v-model:selection="selectedRows"
                    @selection-change="selectionChange"
                    row-key="key"
                    stripe
                    show-summary
                    remoteSummary
                    style="height: 450px; min-width: 420"
                    :row-class-name="tableRowClassName"
                >
                    <el-table-column type="selection" width="50"></el-table-column>
                    <el-table-column label="借货时间" prop="purchaseDate" width="110" sortable>
                        <template #default="scope">{{scope.row.purchaseDate?.slice(0,10)}}</template>
                    </el-table-column>
                    <el-table-column label="借货供应商" prop="supplierName" width="120" sortable></el-table-column>
                    <el-table-column label="采购编号" prop="borrowPurchaseOrderCode" width="150" sortable></el-table-column>
                    <el-table-column prop="materialName" label="借货物料" min-width="130"></el-table-column>
                    <el-table-column prop="unitName" label="单位" min-width="95"></el-table-column>
                    <el-table-column prop="beforeBackQty" label="已还数量" min-width="95"></el-table-column>
                    <el-table-column prop="waitBackQty" label="待还数量" min-width="95"></el-table-column>
                    <el-table-column prop="borrowQty" label="借货数量" min-width="95"></el-table-column>
                    <el-table-column prop="borrowPrice" label="借货单价" min-width="95"></el-table-column>
                    <el-table-column prop="borrowTotalAmount" label="借货金额" width="105" sortable>
                        <template #default="scope">{{scope.row.borrowTotalAmount?.toFixed(2)}}</template>
                    </el-table-column>
                </scTable>
            </el-foot>
        </el-container>
    </el-container>

    <!-- 预览组件 -->
    <el-image-viewer v-if="showImage" @close="closeViewer" :hide-on-click-modal="true" :url-list="srcList" />
</template>

<script>
import publicjs from "@/api/model/publicjs";
import { log } from "@antv/g2plot/lib/utils";
export default {
    name: "typelist",
    components: {
        publicjs,
    },
    props: {
        queryType: { type: String, default: "purchase-order/borrow-pages" },
        defaultQueryList: { type: Object, default: {} },
    },
    data() {
        return {
            selectionRows: [],
            //pkList: ['applyOrderItemId'],
            attrList: {},
            valueList: {},
            queryList: {},
            result: "", // 运行结果
            //预览图片
            previewUrl: [],
            //预览图片列表
            srcList: [],
            showImage: false,
            props1: {
                checkStrictly: true,
                emitPath: false,
            },
            group: [],
            optionsUomCode: [],
            materialTypeTree: [],
            selectedRows: [],
        };
    },
    watch: {
        defaultQueryList: {
            handler(newVal, oldVal) {
                // 如果 defaultQueryList 更新了，也更新 queryList
                this.queryList = { ...this.defaultQueryList, ...newVal };
                this.$refs.mytable.getData();
            },
        },
    },
    created() {
        // 将 queryList 的值赋给 queryList
        this.queryList = { ...this.defaultQueryList };
    },
    methods: {
        //图片预览
        handlePreview(row) {
            if (!row.materialImages || row.materialImages.length == 0) {
                return;
            }
            this.previewUrl = row.materialImages[0]; // 设置当前预览的图片 URL
            this.srcList = row.materialImages; // 设置预览列表
            this.showImage = true; // 显示 el-image

        },
        closeViewer(){
            this.showImage = false; 
        },
        searchChange() {
            this.queryList = {
                ...this.queryList,
                ...this.defaultQueryList,
            };
            this.$nextTick(() => {
                this.$refs.mytable.getData();
            });
        },
        //表格选择后回调事件
        selectionChange(selection) {
            // this.$nextTick(() => {
            //     const newSelection = new Set([...this.selectionRows, ...selection]);
            //     this.selectionRows = Array.from(newSelection); // 转换回数组形式
            // });
            this.selectionRows = selection;
            console.log(selection, "selection");
        },
        setRowClass({ row }) {
            if (this.selectionRows.includes(row)) {
                return "selected-row-color";
            }
            return "";
        },

        clickRow(row) {
            clearTimeout(this.doubleClickTimeout);
            // 记录当前点击时间
            const currentTime = new Date().getTime();

            // 判断是否为双击
            if (currentTime - this.lastClickTime < 250) {
                // 双击
                // this.toggleSelection(row);
                this.$refs.mytable.toggleRowSelection(row, true);
                // 触发事件，传递选中的行
                this.$emit("selection-changed", this.selectionRows);
            } else {
                // 单击
                this.lastClickTime = currentTime;
            }

            // 设置超时，以便下次点击被认为是单击
            this.doubleClickTimeout = setTimeout(() => {
                this.lastClickTime = 0;
            }, 500);
        },
        initMaterialType(ids, showFlag) {
            this.queryList.materialTypeIds = [ids];
            this.materialTypeFlag = showFlag;
        },
        async opBindData() {
            this.selectionRows = [];
            this.queryList = {
                ...this.queryList,
                ...this.defaultQueryList,
            };
            console.log(this.queryList)
            this.$nextTick(() => {
                this.$refs.mytable.getData();
            });
        },
        async initOptions() {
            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "base-dictionary/options",
                    { Codes: ["Status"] }
                );
                if (returnValue.status == 200) {
                    this.optionsState = returnValue.response.find(
                        (p) => p.code == "Status"
                    ).optionsDetails;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }

            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "material-type/tree",
                    { status: 1 }
                );
                if (returnValue.status == 200) {
                    this.materialTypeTree = returnValue.response;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }
            // if(this.isPurchaseUnity){
            //     try {
            //         var returnValue = await this.$API.auth.GetProcessApi.get(
            //             "store/current-purchaseUnity",{ }
            //         );
            //         if (returnValue.status == 200) {
            //             this.optionsPurchaseUnity = returnValue.response;
            //         } else {
            //             this.$message.error("操作失败:" + returnValue.msg);
            //         }
            //     } catch (error) {
            //         this.loading = false;
            //         return false;
            //     }
            // }
        },
    },
    async mounted() {
        debugger;
        await this.initOptions();
        await this.opBindData();
    },
};
</script>
<style>
.el-table .selected-row-color {
    background-color: #b8dcff !important;
}
.el-table--enable-row-hover .el-table__body tr.selected-row-color:hover > td {
    background-color: #b8dcff !important;
}
.el-table__body-wrapper .el-table__body tr.selected-row-color.hover-row > td {
    background-color: #b8dcff !important;
}
.el-table__fixed-body-wrapper
    .el-table__body
    tr.selected-row-color.hover-row
    > td {
    background-color: #b8dcff !important;
}
.el-table__body-wrapper
    .el-table__body
    tr.selected-row-color.hover-row
    > .el-table__row--striped {
    background-color: #b8dcff !important;
}
</style>
